<template>
  <div class="notice">
    <div class="system__icon" @click="open">
      <a-tooltip trigger="contextmenu" placement="bottomLeft" v-model:open="onlinePopover.show">
        <a-badge dot>
          <BellOutlined class="icon" />
        </a-badge>
        <template #title>
          {{ onlinePopover.content }}
          <CloseOutlined @click="onlinePopover.show = false" class="ml-8" />
        </template>
      </a-tooltip>
    </div>
    <Teleport to="body">
      <Popover />
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { BellOutlined } from '@ant-design/icons-vue';
import { getSystemNotice, onlinePopover, showNotice } from './data/data';
import Popover from './subpage/Popover.vue';

const open = () => {
  showNotice.value = true;
  getSystemNotice();
};
</script>

<style lang="scss" scoped>
.notice {
  position: relative;
}
.system__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  .icon {
    font-size: 18px;
  }
}
</style>
